<template>
	<el-dialog :visible.sync="visible" v-dialogDrag :title="title" :close-on-click-modal="false" class="tl-dialog" width="1200px" @open="open" @close="close">
		<el-form class="tl-form" ref="form" :model="model" :rules="rules" label-width="150px" :disabled="disableEditSubmit">
			<el-row>
				<el-col :span="12">
					<el-form-item label="名称" prop="name" :rules="rules.validateRequire">
						<el-input v-model="model.name" maxlength="100" placeholder="请输入名称"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="编号" prop="code" :rules="rules.validateRequire">
						<el-input v-model="model.code" oninput="value = value.replace(/[\W-_]/g,'')" @blur="onBlur($event.target.value)" placeholder="请输入编号" :disabled="!isAdd" clearable></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="质量运营部门" prop="deptcodes">
						<tl-ref-dept v-model="model.deptcodes" :disabled="disableEditSubmit" :initDisplayData.sync="model.deptnames" dataType="code" nameType="name" :externalQueryParam="{ qry_enabled: 1 }" :singleSelect="false"></tl-ref-dept>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="质量运营专员" prop="qcusercodes">
						<tl-ref-user v-model="model.qcusercodes" :disabled="disableEditSubmit" :initDisplayData.sync="model.qcusernames" dataType="code" nameType="name" :externalQueryParam="{ qry_enabled: 1 }" :singleSelect="false"></tl-ref-user>
					</el-form-item>
				</el-col>
				<!-- <el-col :span="12">
					<el-form-item label="质量运营部门名称" prop="deptnames" >
						<el-input v-model="model.deptnames" type="textarea" :rows="4"></el-input>
					</el-form-item>
				</el-col> -->
			</el-row>
			<!-- <el-row>
				<el-col :span="12">
					<el-form-item label="质量运营专员名称" prop="qcusernames" >
						<el-input v-model="model.qcusernames" type="textarea" :rows="4"></el-input>
					</el-form-item>
				</el-col>
			</el-row> -->
			<el-row>
				<el-col :span="12">
					<el-form-item label="授权部门" prop="authorizationdeptcodes">
						<tl-ref-dept v-model="model.authorizationdeptcodes" :disabled="disableEditSubmit" :initDisplayData.sync="model.authorizationdeptnames" dataType="code" nameType="name" :externalQueryParam="{ qry_enabled: 1 }" :singleSelect="false"></tl-ref-dept>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="授权人员" prop="authorizercodes">
						<tl-ref-user v-model="model.authorizercodes" :disabled="disableEditSubmit" :initDisplayData.sync="model.authorizernames" dataType="code" nameType="name" :externalQueryParam="{ qry_enabled: 1 }" :singleSelect="false"></tl-ref-user>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="提醒人" prop="alertusercodes">
						<tl-ref-user v-model="model.alertusercodes" :disabled="disableEditSubmit" :initDisplayData.sync="model.alertusernames" dataType="code" nameType="name" :externalQueryParam="{ qry_enabled: 1 }" :singleSelect="false"></tl-ref-user>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="部门类型" prop="depttype">
						<el-select v-model="model.depttype" filterable clearable>
							<el-option v-for="item in codeModel.depttypeList" :key="item.code" :label="item.name" :value="item.code" />
						</el-select>
					</el-form-item>
				</el-col>
				<!-- <el-col :span="12">
					<el-form-item label="提醒人姓名" prop="alertusernames" >
						<el-input v-model="model.alertusernames" type="textarea" :rows="4"></el-input>
					</el-form-item>
				</el-col> -->
			</el-row>
			<!-- <el-row>
				<el-col :span="12">
					<el-form-item label="授权部门名称" prop="authorizationdeptnames" >
						<el-input v-model="model.authorizationdeptnames" type="textarea" :rows="4"></el-input>
					</el-form-item>
				</el-col>
			</el-row> -->
			<!-- <el-row>
				<el-col :span="12">
					<el-form-item label="授权人员工号" prop="authorizercodes" >
						<el-input v-model="model.authorizercodes" type="textarea" :rows="4"></el-input>
					</el-form-item>
				</el-col>
			</el-row> -->
			<el-row>
				<el-col :span="24">
					<el-form-item label="额外提醒邮箱" prop="emails" :rules="rules.multiEmailRule">
						<el-input-tag v-model="emails" :readOnly="disableEditSubmit" placeholder="请输入正确邮箱格式。"></el-input-tag>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="有效" prop="enabled">
						<el-radio-group v-model="model.enabled">
							<el-radio :label="parseInt(item.code)" v-for="item in codeModel.enabledList" :key="item.code">{{ item.name }}</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="排序码" prop="sortcode">
						<el-input-number v-model="model.sortcode" controls-position="right" :step="1" :min="0" style="width:100%"></el-input-number>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-form-item label="备注" prop="description">
						<el-input v-model="model.description" type="textarea" :rows="3" maxlength="2000" :show-word-limit="true"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="创建人姓名" prop="createusername">
						<el-input v-model="model.createusername" disabled></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="创建日期" prop="createon">
						<el-date-picker v-model="model.createon" type="date" placeholder="创建日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" clearable disabled></el-date-picker>
					</el-form-item>
				</el-col>
			</el-row>
			<!-- <el-row>
				<el-col :span="12">
					<el-form-item label="修改人姓名" prop="modifiedusername">
						<el-input v-model="model.modifiedusername" disabled></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="修改日期" prop="modifiedon">
						<el-date-picker v-model="model.modifiedon" type="date" placeholder="修改日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" clearable disabled></el-date-picker>
					</el-form-item>
				</el-col>
			</el-row> -->
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button :type="disableEditSubmit === false ? 'text' : 'primary'" @click="doCancelEdit">取消</el-button>
			<el-button type="primary" @click="doSubmitEdit" :loading="saveLoading" v-if="disableEditSubmit === false">确认</el-button>
		</div>
	</el-dialog>
</template>

<script>
/** mixins */
import { mixin_edit } from '@tapui/mixins/mixin_edit'
import { mixin_form_validator } from '@/mixins/mixin_form_validator'
/** 子组件 */
/** 工具类 */
import { putAction, getAction, postAction, deleteAction } from '@tapui/utils/http'
import { checkEmail, removeRepeatEmails } from '@/utils/email'
/** VUE配置 */
export default {
	mixins: [mixin_edit, mixin_form_validator],
	components: {},
	data() {
		return {
			moduleTitle: '维护-责任主体部门配置',
			urlPrefix: '/qms/qemDutyDept/',
			url: {
				// 额外的url
			},
			// 处理邮箱赋值
			emails: []
		}
	},
	methods: {
		loaded() {
			// 页面加载完毕执行
			if (!this.isAdd) {
				// 邮箱展示处理
				if (this.model.emails) {
					this.emails = this.model.emails.split(',')
				}
			}
		},
		// 保存确认
		async doSubmitEdit() {
			let valid = await this.$refs.form.validate()
			if (!this.beforeSubmit()) {
				return
			}
			if (valid) {
				// 如果质量运营部门和质量运营专员同时为空则不允许配置
				if ((this.model.deptcodes === undefined || this.model.deptcodes === null || this.model.deptcodes === '') && (this.model.qcusercodes === undefined || this.model.qcusercodes === null || this.model.qcusercodes === '')) {
					this.$tap.alert('质量运营部门与质量运营专员不可以同时为空！', 'warning')
					return false
				}
				// 保存时的邮箱校验
				if (this.model.emails !== undefined && this.model.emails !== null && this.model.emails !== '' && !checkEmail(this.model.emails, true, this.codeModel.emailWhiteList)) {
					this.$tap.alert('邮箱格式错误或邮箱不存在于白名单【' + this.codeModel.emailWhiteList + '】中', 'warning')
					return false
				}
				if (this.isAdd) {
					this.doAdd()
				} else {
					this.doEdit()
				}
			}
		},
		close() {
			// 清空邮箱赋值
			this.emails = []
		},
		onBlur(val) {
			this.$set(this.model, 'code', val)
		}
	},
	watch: {
		emails(newV, oldV) {
			let value = newV !== void 0 && newV.length > 0 ? newV.join(',') : ''
			this.$set(this.model, 'emails', value)
		}
	}
}
</script>
